<template>
  <div class="Articles">
    <!-- 头部 -->
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 首页 -->
          <myel-header text1="首页" text2="内容管理"></myel-header>
        </div>
        <div>
          <el-form ref="form" label-width="80px">
            <!-- 状态 -->
            <el-form-item label="状态">
              <el-radio-group v-model="from.status">
                <el-radio
                  v-for="item in articleStatus"
                  :key="item.id"
                  :label="item.id"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 频道 -->
            <el-form-item label="频道">
              <el-select v-model="value" placeholder="请选择" @change="pindao">
                <el-option
                  v-for="item in mychannels"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 日期 -->
            <el-form-item label="日期">
              <el-date-picker
                v-model="from.formdate"
                type="datetimerange"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
                prefix-icon="el-icon-date"
                @change="changedate"
              ></el-date-picker>
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
              <el-button type="primary" @click="onArticles">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 下边 -->
    <div>
      <el-card class="box-card ArticlesXb">
        <div slot="header" class="clearfix">
          <span>根据查询条件共筛选出{{total_count}}条结果：</span>
        </div>
        <div>
          <!-- 渲染的内容 -->
          <el-table :data="articlesData" stripe style="width: 100%">
            <!-- 封面 -->
            <el-table-column prop="cover" label="封面">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.cover.images[0]"
                  fit="fit"
                  v-if="scope.row.cover.images"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <!-- 状态 -->
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag
                  :type="articleStatus[scope.row.status +1].type"
                >{{articleStatus[scope.row.status +1].label}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="pubdate" label="发布时间"></el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="ArticlesFy">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total_count"
              :page-size="10"
              @current-change="currentchange"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 头部组件
import MyelHeader from '../../components/MyelHeader.vue'
import { getarticles, pusharticles, delarticles } from '../../api/articles.js'
// 文章状态
const articleStatus = [
  {
    id: null,
    type: '',
    label: '全部'
  },
  {
    id: 0,
    type: 'info',
    label: '草稿'
  },
  {
    id: 1,
    type: '',
    label: '待审核'
  },
  {
    id: 2,
    type: 'success',
    label: '审核通过'
  },
  {
    id: 3,
    type: 'warning',
    label: '审核失败'
  },
  {
    id: 4,
    type: 'danger',
    label: '已删除'
  }
]
export default {
  name: 'Articles',
  data () {
    return {
      articleStatus,
      from: {
        // 状态
        status: null,
        // 日期
        formdate: ''
      },
      // 筛选结果数据
      articlesData: [],
      // 当前查询能查到的总条数
      total_count: 0,
      // 当前页码
      curPage: 1,
      // 频道数据
      mychannels: [],
      value: '',
      channel_id: '2',
      // 起始时间
      begin_pubdate: '',
      // 结束时间
      end_pubdate: ''
    }
  },
  created () {
    this.articlesGoods()
  },
  methods: {
    async articlesGoods () {
      // 获取内容管理数据
      const { data: { data } } = await getarticles({
        page: this.curPage,
        status: this.from.status,
        channel_id: this.channel_id,
        begin_pubdate: this.begin_pubdate,
        end_pubdate: this.end_pubdate
      })
      // 渲染
      this.articlesData = data.results
      // 文章总个数
      this.total_count = data.total_count
      // 获取文章频道
      const { data: { data: { channels } } } = await pusharticles()
      this.mychannels = channels
    },
    // 鉴定分页改变
    currentchange (res) {
      this.curPage = res
      // 再次执行请求并渲染页面
      this.articlesGoods()
    },
    // 操作
    // 编辑的回调函数
    handleEdit (index, item) {
      this.$router.push(`/addArticle/${item.id}`)
    },
    // 删除的回调函数
    handleDelete (index, item) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await delarticles(item.id)
          return this.$message({
            message: '恭喜你，删除成功！',
            type: 'success'
          })
        } catch (error) {
          return this.$message.error('不要灰心，下次继续！')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击查询
    onArticles () {
      this.articlesGoods()
    },
    // 频道id
    pindao (res) {
      this.channel_id = res
    },
    // 日期
    changedate (res) {
      this.begin_pubdate = res[0]
      this.end_pubdate = res[1]
    }
  },
  components: {
    MyelHeader
  }
}
</script>

<style lang="less" scoped>
.ArticlesXb {
  margin-top: 30px;
}
.ArticlesFy {
  margin-top: 20px;
}
</style>
